<template>
  <div>
    <div class="nav-bar">
      <van-nav-bar
        :title="title"
        :right-text="rightText"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
        fixed
        style="padding-top:40px"
        ref="navBar"
      />
    </div>
    <div class="vacancy" :style="[{ height: vacancyHeight }]"></div>
  </div>
</template>

<script>
export default {
  name: 'NavBar',
  props: {
    title: {
      type: String,
      default: () => {
        return ''
      }
    },
    rightText: {
      type: String,
      default: () => {
        return ''
      }
    },
    spaceStyle: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data() {
    return {
      vacancyHeight: '84px'
    }
  },
  created() {
    this.$nextTick(() => {
      this.vacancyHeight = this.$refs.navBar.$el.offsetHeight + 'px'
    })
  },
  methods: {
    onClickLeft(value) {
      this.$emit('onLeft', value)
      this.$router.go(-1)
    },
    onClickRight(value) {
      this.$emit('onRight', value)
    }
  }
}
</script>

<style lang="scss" scoped>
.nav-bar {
  width: 100%;
  height: 86px;
  position: fixed;
  top: 0px;
  z-index: 999 !important;
  /deep/ .van-nav-bar {
    z-index: 999 !important;
  }
  /deep/ .van-nav-bar__content {
    height: 44px !important;
  }
}
.vacancy {
  width: 100% !important;
}
</style>
